<template>
  <view class="container">
    <view class="title-row">
      <button class="back-btn" @click="goBack">返回</button>
      <view class="title">新增自定义菜谱</view>
    </view>
    <view class="form-area">
      <input class="input" v-model="name" placeholder="菜谱名称" />
      <input class="input" v-model="description" placeholder="菜谱描述（可选）" />
      <view class="section-title">选择蔬菜（多选）</view>
      <view class="flex-wrap">
        <button v-for="item in vegetables" :key="item.text" :class="['food-btn', selectedVegetables.includes(item.text) ? 'selected-veg' : '']" @click="toggleSelection(item.text, 'vegetables')">{{ item.emoji }} {{ item.text }}</button>
      </view>
      <view style="display:flex;align-items:center;margin-bottom:8rpx;">
        <input class="input" style="flex:1;margin-bottom:0;" v-model="customVegetable" placeholder="自定义蔬菜名称" />
        <button style="margin-left:8rpx;" @click="addCustom('vegetables')">添加</button>
      </view>
      <view class="section-title">选择肉类（多选）</view>
      <view class="flex-wrap">
        <button v-for="item in meats" :key="item.text" :class="['food-btn', selectedMeats.includes(item.text) ? 'selected-meat' : '']" @click="toggleSelection(item.text, 'meats')">{{ item.emoji }} {{ item.text }}</button>
      </view>
      <view style="display:flex;align-items:center;margin-bottom:8rpx;">
        <input class="input" style="flex:1;margin-bottom:0;" v-model="customMeat" placeholder="自定义肉类名称" />
        <button style="margin-left:8rpx;" @click="addCustom('meats')">添加</button>
      </view>
      <view class="section-title">选择主食（多选）</view>
      <view class="flex-wrap">
        <button v-for="item in staples" :key="item.text" :class="['food-btn', selectedStaples.includes(item.text) ? 'selected-staple' : '']" @click="toggleSelection(item.text, 'staples')">{{ item.emoji }} {{ item.text }}</button>
      </view>
      <view style="display:flex;align-items:center;margin-bottom:8rpx;">
        <input class="input" style="flex:1;margin-bottom:0;" v-model="customStaple" placeholder="自定义主食名称" />
        <button style="margin-left:8rpx;" @click="addCustom('staples')">添加</button>
      </view>
      <view class="section-title">选择厨具（单选）</view>
      <view class="flex-wrap">
        <button v-for="item in utensils" :key="item.text" :class="['food-btn', selectedUtensil === item.text ? 'selected-utensil' : '']" @click="selectUtensil(item.text)">{{ item.emoji }} {{ item.text }}</button>
      </view>
      <view style="display:flex;align-items:center;margin-bottom:8rpx;">
        <input class="input" style="flex:1;margin-bottom:0;" v-model="customUtensil" placeholder="自定义厨具名称" />
        <button style="margin-left:8rpx;" @click="addCustom('utensils')">添加</button>
      </view>
      <view class="section-title">制作步骤</view>
      <view v-for="(step, idx) in steps" :key="idx" style="margin-bottom:8rpx;">
        <input class="input" v-model="steps[idx]" :placeholder="`步骤${idx+1}`" />
        <input class="input" v-model="tipsArr[idx]" :placeholder="`小贴士${idx+1}（可选）`" />
        <button v-if="steps.length>1" style="margin-bottom:8rpx;" @click="removeStep(idx)">删除该步骤</button>
      </view>
      <button @click="addStep" style="margin-bottom:16rpx;">新增制作步骤</button>
      <view class="section-title">选择难度</view>
      <view class="flex-wrap">
        <button v-for="opt in difficultyOptions" :key="opt.value" :class="['diff-btn', difficulty === opt.value ? 'diff-selected' : '']" @click="selectDifficulty(opt.value)">{{ opt.label }}</button>
      </view>
      <view class="section-title">烹饪时间（分钟）</view>
      <input class="input" v-model.number="timeNeeded" type="number" placeholder="如：10" />
      <view class="btn-row">
        <button class="save-btn" @click="saveRecipe">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
const DIFFICULTY_OPTIONS = [
  { label: '简单', value: 'easy' },
  { label: '中等', value: 'medium' },
  { label: '困难', value: 'hard' }
]
export default {
  data() {
    return {
      name: '',
      description: '',
      selectedVegetables: [],
      selectedMeats: [],
      selectedStaples: [],
      selectedUtensil: '',
      tips: '',
      difficulty: 'easy',
      timeNeeded: 10,
      vegetables: [
        { text: '土豆', emoji: '🥔' }, { text: '胡萝卜', emoji: '🥕' }, { text: '花菜', emoji: '🥦' }, { text: '白萝卜', emoji: '🥗' },
        { text: '西葫芦', emoji: '🥒' }, { text: '茄子', emoji: '🍆' }, { text: '芹菜', emoji: '🥬' }, { text: '黄瓜', emoji: '🥒' },
        { text: '洋葱', emoji: '🧅' }, { text: '菌菇', emoji: '🍄' }, { text: '茴子', emoji: '🌱' }, { text: '豆腐', emoji: '🧊' },
        { text: '包菜', emoji: '🥬' }, { text: '白菜', emoji: '🥬' }
      ],
      meats: [
        { text: '牛肉', emoji: '🥩' }, { text: '香肠', emoji: '🌭' }, { text: '腊肠', emoji: '🥓' }, { text: '鸡肉', emoji: '🍗' },
        { text: '猪肉', emoji: '🥩' }, { text: '鸡蛋', emoji: '🥚' }, { text: '虾', emoji: '🦐' }, { text: '骨头', emoji: '🦴' }, { text: '鱼', emoji: '🐟' }
      ],
      staples: [
        { text: '面条', emoji: '🍜' }, { text: '面包', emoji: '🍞' }, { text: '米', emoji: '🍚' }, { text: '方便面', emoji: '🍜' }
      ],
      utensils: [
        { text: '烤箱', emoji: '🧑‍🍳' }, { text: '空气炸锅', emoji: '🔥' }, { text: '微波炉', emoji: '📱' },
        { text: '电饭煲', emoji: '🍚' }, { text: '一口能炒又能煮的大锅', emoji: '🥘' }
      ],
      difficultyOptions: DIFFICULTY_OPTIONS,
      customVegetable: '',
      customMeat: '',
      customStaple: '',
      customUtensil: '',
      steps: [''],
      tipsArr: ['']
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    toggleSelection(text, type) {
      let arr = this[`selected${type.charAt(0).toUpperCase() + type.slice(1)}`]
      if (arr.includes(text)) {
        arr = arr.filter(i => i !== text)
      } else {
        arr = [...arr, text]
      }
      this[`selected${type.charAt(0).toUpperCase() + type.slice(1)}`] = arr
    },
    selectUtensil(text) {
      this.selectedUtensil = text
    },
    selectDifficulty(val) {
      this.difficulty = val
    },
    addCustom(type) {
      let val = ''
      let emoji = ''
      if(type==='vegetables') { val = this.customVegetable.trim(); emoji='🥬'; if(val) this.vegetables.push({text:val,emoji}); this.customVegetable=''; }
      if(type==='meats') { val = this.customMeat.trim(); emoji='🍖'; if(val) this.meats.push({text:val,emoji}); this.customMeat=''; }
      if(type==='staples') { val = this.customStaple.trim(); emoji='🍚'; if(val) this.staples.push({text:val,emoji}); this.customStaple=''; }
      if(type==='utensils') { val = this.customUtensil.trim(); emoji='🍳'; if(val) this.utensils.push({text:val,emoji}); this.customUtensil=''; }
    },
    addStep() {
      this.steps.push('');
      this.tipsArr.push('');
    },
    removeStep(idx) {
      if(this.steps.length>1) {
        this.steps.splice(idx,1);
        this.tipsArr.splice(idx,1);
      }
    },
    saveRecipe() {
      if (!this.name) {
        uni.showToast({ title: '请填写菜谱名称', icon: 'none' })
        return
      }
      if (this.selectedVegetables.length === 0 && this.selectedMeats.length === 0 && this.selectedStaples.length === 0) {
        uni.showToast({ title: '请至少选择一种食材', icon: 'none' })
        return
      }
      if (!this.selectedUtensil) {
        uni.showToast({ title: '请选择厨具', icon: 'none' })
        return
      }
      let customList = uni.getStorageSync('custom') || []
      let maxId = 999
      customList.forEach(item => {
        const numId = parseInt(item.id)
        if (!isNaN(numId) && numId > maxId) {
          maxId = numId
        }
      })
      const newId = (maxId + 1).toString()
      const recipe = {
        id: newId,
        name: this.name,
        description: this.description,
        vegetables: this.selectedVegetables,
        meats: this.selectedMeats,
        staples: this.selectedStaples,
        utensil: this.selectedUtensil,
        steps: this.steps,
        tips: this.tipsArr,
        difficulty: this.difficulty,
        timeNeeded: this.timeNeeded
      }
      customList.push(recipe)
      uni.setStorageSync('custom', customList)
      uni.showToast({ title: '保存成功', icon: 'success' })
      setTimeout(() => {
        uni.navigateBack()
      }, 800)
    }
  }
}
</script>

<style scoped>
.container { display: flex; flex-direction: column; min-height: 100vh; background: #f7f7f7; }
.title-row { display: flex; align-items: center; padding: 32rpx 0 24rpx 0; justify-content: center; position: relative; }
.back-btn { position: absolute; left: 24rpx; top: 50%; transform: translateY(-50%); font-size: 16px; color: #1976D2; background: none; border: none; }
.title { font-size: 24px; font-weight: bold; text-align: center; }
.form-area { flex: 1; padding: 24rpx; }
.input { width: 100%; height: 64rpx; border-radius: 8rpx; border: 2rpx solid #eee; padding: 0 24rpx; font-size: 16px; margin-bottom: 16rpx; background: #fff; }
.section-title { font-size: 16px; font-weight: bold; margin: 18rpx 0 8rpx 0; }
.flex-wrap { display: flex; flex-wrap: wrap; margin-bottom: 8rpx; }
.food-btn { margin: 0 8rpx 8rpx 0; padding: 8rpx 16rpx; border-radius: 8rpx; border: none; background: #f1f8e9; color: #222; font-size: 15px; }
.selected-veg { background: #a5d6a7; }
.selected-meat { background: #ffccbc; }
.selected-staple { background: #ffe082; }
.selected-utensil { background: #90caf9; }
.diff-btn { margin: 0 8rpx 8rpx 0; padding: 8rpx 16rpx; border-radius: 8rpx; border: none; background: #e3f2fd; color: #222; font-size: 15px; }
.diff-selected { background: #1976d2; color: #fff; }
.btn-row { margin: 32rpx 0 0 0; display: flex; justify-content: center; }
.save-btn { width: 90vw; height: 80rpx; background: #1976d2; color: #fff; font-size: 18px; font-weight: bold; border-radius: 40rpx; margin: 24rpx auto 0 auto; border: none; }
</style> 